<!--
 * @Author: wang_jl
 * @Date: 2021-11-25 9:52:35
 * @LastEditTime: 2022-01-25 10:39:42
 * @Description: 国际化暂不开放显示页
 -->
<template>
  <div class="page">
    <div class="page-container">
      <div><img src="@/assets/img/error/not_open.svg"></div>
      <div class="text">
        <div class="title">
          国际化资源暂不开放
        </div>
        <div class="tip">
          请到高级配置中开启
        </div>
        <div class="btn">
          <fks-button
            type="primary"
            @click="back"
          >
            跳转高级配置
          </fks-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Unavailable',
  data() {
    return {}
  },
  methods: {
    back() {
      this.$router.push('/config/advanced')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.page {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: url('../../../../../assets/img/error/err_bg.png') no-repeat 0 0;
  background-size: cover;

  .page-container {
    display: flex;
    align-items: center;
    margin: 0 auto;

    img {
      width: 100%;
    }

    .text {
      min-width: 500px;
      padding-left: 128px;

      .title {
        margin-bottom: 32px;
        font-size: 24px;
        line-height: 32px;
        color: #191919;
        opacity: 0;
        animation-name: slide-up;
        animation-duration: 1s;
        animation-fill-mode: forwards;
      }

      .tip {
        font-size: 16px;
        line-height: 20px;
        color: #555;
        opacity: 0;
        animation-name: slide-up;
        animation-duration: 1s;
        animation-delay: 0.1s;
        animation-fill-mode: forwards;
      }

      .btn {
        display: flex;
        justify-content: flex-end;
        margin-top: 48px;
        opacity: 0;
        animation-name: slide-up;
        animation-duration: 1s;
        animation-delay: 0.2s;
        animation-fill-mode: forwards;

        ::v-deep .fks-button {
          width: 106px;
          height: 40px;
          border-radius: 4px;
          color: #fff;
        }
      }

      @keyframes slide-up {
        0% {
          opacity: 0;
          transform: translateY(100px);
        }

        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }
  }
}
</style>